<script setup lang="ts">
import { useAppConfig, useDevice, useProfile } from '@/stores'
import { useCallCustomerService, useModal, useNav, usePx, useToast } from '@/utils'
import { onPageScroll } from '@dcloudio/uni-app'
import { isNil } from 'lodash-es'
import { computed, ref } from 'vue'
import SettingItem from './components/setting-item.vue'

const device = useDevice()
const titleBarTransparent = ref(true)
const profile = useProfile()
const appConfig = useAppConfig()

const titleBarTitle = computed(() => {
  return UNI_PLATFORM === 'mp-weixin' ? '我的' : ''
})

// #ifdef MP-WEIXIN
onPageScroll(({ scrollTop }) => {
  titleBarTransparent.value = scrollTop < usePx(30)
})
// #endif
function handPassWord() {
  if (!profile.isLoggedIn) {
    useToast('请先登录')
    return
  }
  useNav('/me/changPassword')
}

async function delUser() {
  const { confirm } = await useModal({
    content: '确定退出登录吗？',
    cancelText: '确定',
    confirmText: '取消',
  })
  if (!confirm) {
    profile.clear()
    useToast('退出成功，请重新登录')
    useNav('/me/login')
  }
}
function login() {
  useNav('/me/login')
}
</script>

<template>
  <view class="relative">
    <!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
    <cm-title-bar :title="titleBarTitle" :transparent="titleBarTransparent"></cm-title-bar>
    <!-- #endif -->

    <!-- 渐变背景 -->
    <view class="absolute top-0 w-full">
      <!-- #ifndef H5 -->
      <view class="relative" :style="{ height: `${device.menuButtonStyle.bottom + usePx(10)}px` }"></view>
      <!-- #endif -->
      <view class="relative h-370px"></view>
      <view class="absolute top-0 h-full w-full">
        <image class="absolute h-full w-full" src="~@/static/pagebg.jpeg" mode="aspectFill"></image>
        <view class="absolute bottom-0 h-270px w-full from-transparent to-theme-pagebg bg-gradient-to-b"></view>
      </view>
    </view>

    <view class="relative p-60px">
      <view class="relative">
        <view class="flex items-center">
          <!-- avatar -->
          <view class="h-100px w-100px flex items-center justify-center overflow-hidden rd-full bg-gray-300 text-60px text-#ffffff">
            <!-- <ui-avatar :url="profile.userInfo ? profile.userInfo.orgInfo.appLog : undefined"></ui-avatar> -->
            <view>{{ profile.userInfo.username[0] }}</view>
          </view>
          <!--  -->
          <view v-if="profile.isLoggedIn" class="ml-26px text-#3">
            <view class="h-36px w-180px overflow-hidden text-ellipsis text-36px font-500">{{ profile.userInfo.username || profile.userInfo.realName }}</view>
            <view v-if="!isNil(profile.userInfo.phone)" class="mt-5px text-28px">{{ `${profile.userInfo.phone}`.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2') }}</view>
          </view>
          <view v-else class="ml-26px text-36px text-#3 font-500" @click="login">点击登录</view>
        </view>

        <!-- 小程序登录按钮 -->
        <!-- #ifdef MP-WEIXIN || MP-ALIPAY  || MP-KUAISHOU -->
        <cm-virtual-login-btn v-if="!profile.isLoggedIn"></cm-virtual-login-btn>
        <!-- #endif -->
      </view>
    </view>

    <view class="relative px-30px pb-30px">
      <view class="" @click="handPassWord">
        <setting-item label="修改密码">
          <template #icon>
            <view class="scale-50">
              <view class="text-theme-primary i-icon-park-outline:activity-source text-100px text-gray-300"></view>
            </view>
          </template>
        </setting-item>
      </view>
      <view class="mt-15px" @click="delUser">
        <setting-item label="退出登录">
          <template #icon>
            <view class="scale-50">
              <view class="text-theme-primary i-icon-park-outline:people-delete-one text-100px"></view>
            </view>
          </template>
        </setting-item>
      </view>
    </view>

    <!-- <view class="mt-20px px-30px">
      <ui-token-btn></ui-token-btn>
    </view> -->

  </view>
</template>

<style>

</style>
